<template>
  <div class="StudentTable">
    <el-table :data="tableData" style="width: 100%" :stripe="true">
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img :src="scope.row.image" alt="图片" class="image-preview" />
        </template>
      </el-table-column>

      <el-table-column label="视频">
        <template slot-scope="scope">
          <!-- 只有当 scope.row.mp4 有值时才显示视频 -->
          <template v-if="scope.row.mp4">
            <video :src="scope.row.mp4" controls class="video-preview"></video>
          </template>
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.state"
            :active-value="1"
            :inactive-value="0"
            active-text="使用中"
            inactive-text="已禁止"
            @change="handleStatusChange(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>
      

      <!-- <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button @click="handleAction(scope.row)" type="primary"
            >修改</el-button
          >
        </template>
      </el-table-column> -->
    </el-table>
  </div>
</template>
<script>
import { chanhecarouselstate } from '@/api/pcclinet'

export default {
  name: 'StudentTable',
  data() {
    return {}
  },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },

  methods: {
  handleAction(row) {
    this.$prompt('请选择新的图片', '修改图片', {
      inputType: 'file',
      inputAttributes: {
        accept: 'image/*',
        multiple: false
      }
    })
      .then(({ file }) => {
        if (file) {
          const reader = new FileReader()
          reader.onload = e => {
            row.image = e.target.result // 更新图片URL
            //  console.log('新图片已加载:', row.image)
          }
          reader.readAsDataURL(file)
        }
      })
      .catch(() => {
        //  console.log('取消修改')
      })
  },
  handleStatusChange(row) {
    //  console.log(`状态已更改为: ${row.state === 1 ? '使用中' : '已禁止'}`);
    
    chanhecarouselstate({ data: { id: row.id, state: row.state } })
      .then(res => {
        //  console.log("状态修改成功", res);
        // Emit an event to inform the parent component to refresh data
        this.$emit('refresh-data');
      })
      .catch(error => {
        console.error('状态修改失败:', error);
      });
  }
},

  mounted() {}
}
</script>


<style lang="scss" scoped>
a {
  color: $color-primary;
}
.image-preview {
  max-width: 100px; /* 根据需要调整 */
  max-height: 100px; /* 根据需要调整 */
}

.video-preview {
  max-width: 100px; /* 根据需要调整 */
  max-height: 100px; /* 根据需要调整 */
}

.button-wrapper {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
</style>
